<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>



  <script type="text/babel">
    
    /* 
    情况1: 满足条件渲染界面A, 否则渲染界面B
    情况2: 只有满足条件才渲染界面, 否则没有任何显示
    */

    let vDom
    let isLoading = true

    /* if ... else */
    /* if (isLoading) {
      vDom = <h2>数据加载完成</h2>
    } else {
      vDom = <h3>正在加载中...</h3>
    } */

    /* 三元运算符 */
    // vDom = isLoading ? <h2>数据加载完成2</h2> : <h3>正在加载中2...</h3>

    // 一般不用这个
    /* if (isLoading) {
      vDom = <h2>数据加载完成3</h2>
    } */

    /*  && */
    vDom = isLoading && <h2>数据加载完成4</h2>

    /* 
     表达1 && 表达式2
       如果表达式1对应的布尔值是true, 结果为表达式2的值
       如果表达1对应的布尔值是false, 结果为表达式1的值
     表达1 || 表达式2
        如果表达式1对应的布尔值是true, 结果为表达式1的值
        如果表达1对应的布尔值是false, 结果为表达式2的值
    */


    // 渲染虚拟DOM
    ReactDOM.render(vDom, document.getElementById('app'))
  </script>
</body>
</html>